<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles/music.css" />
  </head>
  <body>
    <!--LOgo-->
    <header>
      <div class="header-inner">
        <img src="imgs/qqmusic.png" />
      </div>
    </header>
    <!--歌单推荐-->
    <h1>歌单推荐</h1>
    <div>
      <div class="tag-list">
        <a href="#" class="tag-item tag-active">为你推荐</a>
        <a href="#" class="tag-item">运动</a>
        <a href="#" class="tag-item">网络歌曲</a>
        <a href="#" class="tag-item">思念</a>
        <a href="#" class="tag-item">官方歌单</a>
        <a href="#" class="tag-item">情歌</a>
      </div>
      <div class="playlist">
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">一首好歌</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">播放量 12.7W</a>
          </div>
        </div>

        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000kxqtN0ddCpU_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">阿云嘎</a>
          </div>
          
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000001RNYYW0rHuPV_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">阿云嘎</a>
          </div>
         
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002R4DOj26Q61A_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">阿云嘎</a>
          </div>
          
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img
              src="https://y.gtimg.cn/music/photo_new/T002R300x300M0000005wEOc07Udwu_1.jpg"
              class="cover-img"
            />
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play" />
          </a>
          <div>
            <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
          </div>
          <div>
            <a href="#" class="nowrap album-author">阿云嘎</a>
          </div>
          
        </div>
      </div>
    </div>
    <!--新歌首发-->
    <h1>新歌首发</h1>
    <div class="tag-list">
      <a href="#" class="tag-item tag-active">最新</a>
      <a href="#" class="tag-item">内地</a>
      <a href="#" class="tag-item">港台</a>
      <a href="#" class="tag-item">欧美</a>
      <a href="#" class="tag-item">韩国</a>
      <a href="#" class="tag-item">日本</a>
    </div>
    <div class="playlist_newsongs">
      <div class="newsongs_item">
        <img
          src="https://tse1-mm.cn.bing.net/th/id/OIP-C.LuduFFZIffOtj_btnT7_QgHaEK?w=259&h=180&c=7&r=0&o=5&dpr=2&pid=1.7"
          alt="图片描述"
        />
        <div class="newsongs_text">
          <div><a href="#" class="nowrap album-title">C-rta</a></div>
          <div><a href="#" class="nowrap album-author">zombie</a></div>
        </div>
        <span class="newsongs_time">02:56</span>
      </div>

      <div class="newsongs_item">
        <img
          src="https://media.9game.cn/gamebase/ieu-gdc-pre-process/images/20230217/1/17/0e7410bff8d9c2dcd4f6d82c36a68c96.png"
          alt="图片描述"
        />
        <div class="newsongs_text">
          <div><a href="#" class="nowrap album-title">23-4唱片</a></div>
          <div><a href="#" class="nowrap album-author">Minick</a></div>
        </div>
        <span class="newsongs_time">02:56</span>
      </div>

      <div class="newsongs_item">
        <img
          src="https://www.minecraftzw.com/wp-content/uploads/2023/10/minecraftzw_20231026_1698351576.webp"
          alt="图片描述"
        />
        <div class="newsongs_text">
          <div><a href="#" class="nowrap album-title">向宿命挥拳的人</a></div>
          <div><a href="#" class="nowrap album-author">阿云嘎</a></div>
        </div>
        <span class="newsongs_time">02:56</span>
      </div>

      <div class="newsongs_item">
        <img
          src="https://ts3.tc.mm.bing.net/th/id/OIP-C.v3_trTvEwkU_qW7Af54INQAAAA?cb=12&rs=1&pid=ImgDetMain&o=7&rm=3"
          alt="图片描述"
        />
        <div class="newsongs_text">
          <div><a href="#" class="nowrap album-title">243-42唱片</a></div>
          <div><a href="#" class="nowrap album-author">Chai_A</a></div>
        </div>
        <span class="newsongs_time">02:56</span>
      </div>

      <div class="newsongs_item">
        <img
          src="https://www.downkr.com/uploadfile/2021/0420/584_202104195050439.png"
          alt="图片描述"
        />
        <div class="newsongs_text">
          <div><a href="#" class="nowrap album-title">red-唱片</a></div>
          <div><a href="#" class="nowrap album-author">W_Y</a></div>
        </div>
        <span class="newsongs_time">02:56</span>
      </div>

      <div class="newsongs_item">
        <img
          src="https://ts1.tc.mm.bing.net/th/id/R-C.8ce3516edc70464c5f807ff32730e853?rik=QRVfloRdeGv0lg&riu=http%3a%2f%2fimg.kuai8.com%2fattaches%2fnews%2fimage%2f20161121%2f201611211333316162.jpg&ehk=h8PnMRvXHdZo3gDi7i4QklpqIj2grOGC4yg%2fiz7ASDs%3d&risl=&pid=ImgRaw&r=0"
          alt="图片描述"
        />
        <div class="newsongs_text">
          <div><a href="#" class="nowrap album-title">WOrk-songs</a></div>
          <div><a href="#" class="nowrap album-author">3号团</a></div>
        </div>
        <span class="newsongs_time">05:21</span>
      </div>

      <div class="newsongs_item">
        <img
          src="https://ts4.tc.mm.bing.net/th/id/OIP-C.lpgIidetYGPv4OR8SeS35QAAAA?cb=12&rs=1&pid=ImgDetMain&o=7&rm=3"
          alt="图片描述"
        />
        <div class="newsongs_text">
          <div><a href="#" class="nowrap album-title">AI3-7</a></div>
          <div><a href="#" class="nowrap album-author">4-is-nothing</a></div>
        </div>
        <span class="newsongs_time">02:56</span>
      </div>

      <div class="newsongs_item">
        <img
          src="https://ts4.tc.mm.bing.net/th/id/OIP-C.TQDVN43noApiAPJTdDxnBwAAAA?cb=12&rs=1&pid=ImgDetMain&o=7&rm=3"
          alt="图片描述"
        />
        <div class="newsongs_text">
          <div><a href="#" class="nowrap album-title">NI-Al合金唱片</a></div>
          <div><a href="#" class="nowrap album-author">3-3-4二甲基戊烷</a></div>
        </div>
        <span class="newsongs_time">02:56</span>
      </div>

      <div class="newsongs_item">
        <img
          src="https://ts1.tc.mm.bing.net/th/id/OIP-C.FPI2RlK-qdZcBA77Wrz_UgAAAA?cb=12&rs=1&pid=ImgDetMain&o=7&rm=3"
          alt="图片描述"
        />
        <div class="newsongs_text">
          <div><a href="#" class="nowrap album-title">XU-N3</a></div>
          <div><a href="#" class="nowrap album-author">4you</a></div>
        </div>
        <span class="newsongs_time">05:20</span>
      </div>
    </div>
    <!--MV-->
    <h1>MV</h1>
    <div class="tag-list">
      <a href="#" class="tag-item tag-active">精选</a>
      <a href="#" class="tag-item">内地</a>
      <a href="#" class="tag-item">港台</a>
      <a href="#" class="tag-item">欧美</a>
      <a href="#" class="tag-item">韩国</a>
      <a href="#" class="tag-item">日本</a>
    </div>

    <div class="playlist">
      <div class="album">
        <a href="#" class="cover-wrap">
          <img
            src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg"
            class="cover-img2"
          />
          <div class="cover-mask"></div>
          <img src="imgs/cover_play.png" class="cover-play" />
        </a>
        <div>
          <a href="#" class="nowrap album-title">一首好歌</a>
        </div>
        <div>
          <a href="#" class="nowrap album-author"
            ><img src="imgs/icon_listen.png" /> 播放量 12.7W</a
          >
        </div>
      </div>

      <div class="album">
        <a href="#" class="cover-wrap">
          <img
            src="https://tse2-mm.cn.bing.net/th/id/OIP-C.B-70n0ZonTGxiHrLCSxY0gHaHa?w=209&h=209&c=7&r=0&o=7&cb=12&dpr=2&pid=1.7&rm=3"
            class="cover-img2"
          />
          <div class="cover-mask"></div>
          <img src="imgs/cover_play.png" class="cover-play" />
        </a>
        <div>
          <a href="#" class="nowrap album-title">一首好歌</a>
        </div>
        <div>
          <a href="#" class="nowrap album-author"
            ><img src="imgs/icon_listen.png" /> 播放量 12.7W</a
          >
        </div>
      </div>

      <div class="album">
        <a href="#" class="cover-wrap">
          <img
            src="https://tse4-mm.cn.bing.net/th/id/OIP-C.XLYzcEFwX5LShN3olK9qpQHaEK?w=299&h=180&c=7&r=0&o=7&cb=12&dpr=2&pid=1.7&rm=3"
            class="cover-img2"
          />
          <div class="cover-mask"></div>
          <img src="imgs/cover_play.png" class="cover-play" />
        </a>
        <div>
          <a href="#" class="nowrap album-title">一首好歌</a>
        </div>
        <div>
          <a href="#" class="nowrap album-author"
            ><img src="imgs/icon_listen.png" /> 播放量 12.7W</a
          >
        </div>
      </div>

      <div class="album">
        <a href="#" class="cover-wrap">
          <img
            src="https://tse4-mm.cn.bing.net/th/id/OIP-C.2E8ZPOA9qJbowxF74HKzbgHaEK?w=265&h=180&c=7&r=0&o=7&cb=12&dpr=2&pid=1.7&rm=3"
            class="cover-img2"
          />
          <div class="cover-mask"></div>
          <img src="imgs/cover_play.png" class="cover-play" />
        </a>
        <div>
          <a href="#" class="nowrap album-title">一首好歌</a>
        </div>
        <div>
          <a href="#" class="nowrap album-author"
            ><img src="imgs/icon_listen.png" /> 播放量 12.7W</a
          >
        </div>
      </div>

      <div class="album">
        <a href="#" class="cover-wrap">
          <img
            src="https://tse4-mm.cn.bing.net/th/id/OIP-C.sbRx6JF5fSYk9aRZDRw3ZgHaEK?w=333&h=187&c=7&r=0&o=7&cb=12&dpr=2&pid=1.7&rm=3"
            class="cover-img2"
          />
          <div class="cover-mask"></div>
          <img src="imgs/cover_play.png" class="cover-play" />
        </a>
        <div>
          <a href="#" class="nowrap album-title">一首好歌</a>
        </div>
        <div>
          <a href="#" class="nowrap album-author"
            ><img src="imgs/icon_listen.png" /> 播放量 12.7W</a
          >
        </div>
      </div>

      <div class="album">
        <a href="#" class="cover-wrap">
          <img
            src="https://tse4-mm.cn.bing.net/th/id/OIP-C.Oj5Gy6vbD7HOmJyVN-_YXQHaFj?w=273&h=205&c=7&r=0&o=7&cb=12&dpr=2&pid=1.7&rm=3"
            class="cover-img2"
          />
          <div class="cover-mask"></div>
          <img src="imgs/cover_play.png" class="cover-play" />
        </a>
        <div>
          <a href="#" class="nowrap album-title">一首好歌</a>
        </div>
        <div>
          <a href="#" class="nowrap album-author"
            ><img src="imgs/icon_listen.png" /> 播放量 12.7W</a
          >
        </div>
      </div>

      <div class="album">
        <a href="#" class="cover-wrap">
          <img
            src="https://tse3-mm.cn.bing.net/th/id/OIP-C.h6ISJUUiIqZFMTtZC6wPtAHaFj?w=286&h=204&c=7&r=0&o=7&cb=12&dpr=2&pid=1.7&rm=3"
            class="cover-img2"
          />
          <div class="cover-mask"></div>
          <img src="imgs/cover_play.png" class="cover-play" />
        </a>
        <div>
          <a href="#" class="nowrap album-title">一首好歌</a>
        </div>
        <div>
          <a href="#" class="nowrap album-author"
            ><img src="imgs/icon_listen.png" /> 播放量 12.7W</a
          >
        </div>
      </div>

      <div class="album">
        <a href="#" class="cover-wrap">
          <img
            src="https://tse1-mm.cn.bing.net/th/id/OIP-C.GQzPHqBDYAxU64_Lv5jtcwHaE8?w=289&h=193&c=7&r=0&o=7&cb=12&dpr=2&pid=1.7&rm=3"
            class="cover-img2"
          />
          <div class="cover-mask"></div>
          <img src="imgs/cover_play.png" class="cover-play" />
        </a>
        <div>
          <a href="#" class="nowrap album-title">一首好歌</a>
        </div>
        <div>
          <a href="#" class="nowrap album-author"
            ><img src="imgs/icon_listen.png" /> 播放量 12.7W</a
          >
        </div>
      </div>

      <div class="album">
        <a href="#" class="cover-wrap">
          <img
            src="https://tse4-mm.cn.bing.net/th/id/OIP-C.8ELSe79NmxYvwTPPwRs-gAHaHa?w=171&h=180&c=7&r=0&o=7&cb=12&dpr=2&pid=1.7&rm=3"
            class="cover-img2"
          />
          <div class="cover-mask"></div>
          <img src="imgs/cover_play.png" class="cover-play" />
        </a>
        <div>
          <a href="#" class="nowrap album-title">一首好歌</a>
        </div>
        <div>
          <a href="#" class="nowrap album-author"
            ><img src="imgs/icon_listen.png" /> 播放量 12.7W</a
          >
        </div>
      </div>

      <div class="album">
        <a href="#" class="cover-wrap">
          <img
            src="https://tse4-mm.cn.bing.net/th/id/OIP-C.piSbd1_fWWXbLJhmtmYUWwHaEK?w=313&h=180&c=7&r=0&o=7&cb=12&dpr=2&pid=1.7&rm=3"
            class="cover-img2"
          />
          <div class="cover-mask"></div>
          <img src="imgs/cover_play.png" class="cover-play" />
        </a>
        <div>
          <a href="#" class="nowrap album-title">一首好歌</a>
        </div>
        <div>
          <a href="#" class="nowrap album-author"
            ><img src="imgs/icon_listen.png" /> 播放量 12.7W</a
          >
        </div>
      </div>
    </div>
  </body>
</html>
